﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        /*简单的圆角框技术，边框不能渐变*/
        #simpleRound {
            width: 418px;
            background: #effce7 url(../img/bottom.gif) no-repeat left bottom;
            padding-bottom: 1px;
        }

            #simpleRound h2 {
                background: url(../img/top.gif) no-repeat left top;
                margin-top: 0;
                padding: 20px 20px 0 20px;
            }

            #simpleRound p {
                padding: 0 20px;
            }

        /*简单的圆角框技术，边框渐变*/
        #simpleRound2 {
            width: 424px;
            background: url(../img/tile2.gif) repeat-y;
        }

            #simpleRound2 h2 {
                background: url(../img/top2.gif) no-repeat left top;
                padding-top: 20px;
            }

            #simpleRound2 p {
                background: url(../img/bottom2.gif) no-repeat left bottom;
                padding-bottom: 20px;
            }

            #simpleRound2 h2, #simpleRound2 p {
                padding-left: 20px;
                padding-right: 20px;
            }

        /*html5在4个角定义圆角图片*/
        #multiImg, #borderRadius, #borderImg {
            width: 30em;
            background-color: #89ac11;
            color: #fff;
            padding: 2em 2em 1em 2em;
            margin-top: 2em;
        }

            #multiImg h2, #borderRadius h2, #borderImg h2 {
                margin-top: 0;
                font-size: 1.6em;
            }

        #multiImg {
            background-image: url(../img/mtop-left.gif), url(../img/mtop-right.gif), url(../img/mbottom-left.gif), url(../img/mbottom-right.gif);
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
            background-position: top left, top right, bottom left, bottom right;
        }

        /*使用css3中定义的角的半径的方式*/
        #borderRadius {
            -moz-border-radius: 1em;
            -webkit-border-radius: 1em;
            border-radius: 1em;
        }

        /*使用css3中定义的角图像方法*/
        #borderImg {
            border-image: url(../img/corners.gif) 25% 25% 25% 25% / 25px round round;
        }
    </style>
</head>
<body>
    <div id="simpleRound">
        <h2>简单的圆角框技术,边框不渐变</h2>
        <p>使用上下的两幅图片，下面的图片绑在div上面， 上面的图片绑定在h2上面完成</p>
    </div>

    <div id="simpleRound2">
        <h2>简单的圆角框技术，边框渐变</h2>
        <p>使用上下的两幅图片，下面的图片绑在p上面， 上面的图片绑定在h2上面完成,边框使用另外一种图片</p>
    </div>

    <div id="multiImg">
        <h2>使用html5的多个背景图片</h2>
        <p>在div上面的四个角定义4个背景图片</p>
    </div>

    <div id="borderRadius">
        <h2>使用css3的新属性border-radius实现圆角框</h2>
        <p>使用css3中的border-radius实现圆角框， 只需要定义圆角框的半径就可以了</p>
    </div>


    <div id="borderImg">
        <h2>使用css3的新属性border-img实现圆角框</h2>
        <p>This is another rounded corner box. Isn't it groovey! Forget what I said about those other boxes. This is my favorite box around. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? This one uses a single image which the browser uses to make up the sides, corners and body of the box. Aren't they clever! They'll be making your tea next!</p>
    </div>

</body>
</html>
